<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
    String path = request.getContextPath();
%>
<jsp:include page="/web/inc/header"/>

<section>
<div class="wrap">
  <div id="seach">
    <div id="logo"><a href="#" title="垃圾分类查询">分类查询</a></div>
    <div class="crumbs">
      <a href="" onclick="history.go(-1)" >&lt; 返回文章列表</a>
    </div>
  </div>


<article class="article">
  <div class="main">
    <div class="title">
      <span>发表者:${requestScope.article.userinfo.nickname}</span>
      <a href="#"></a>
      <span>发表时间：<fmt:formatDate value="${requestScope.article.inputTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
      <span>垃圾类型：${requestScope.article.garbageType.title}</span>
      <span>垃圾材质：${requestScope.article.texture.title}</span><br>
    </div>
    <h1>${requestScope.article.title}</h1>
      ${requestScope.article.content}




    <div class="handle">
      <c:if test="${requestScope.flag eq true}" var="f">
         <a id="praise" href="javascript:void(0);" class="active"></a>
      </c:if>
      <c:if test="${not f}">
         <a id="praise" href="javascript:void(0);"></a>
      </c:if>
    <span id="praiseCount">${requestScope.article.praiseCount}</span>

      <c:if test="${requestScope.collectFlag eq true}">
         <span id="collect">已收藏</span>
      </c:if>
      <c:if test="${requestScope.collectFlag eq false}">
        <span id="collect">点击收藏</span>
      </c:if>

    <span>收藏数：${requestScope.article.collectCount}</span>
    <span>点赞数：${requestScope.article.praiseCount}</span>
    <span>评论数：${requestScope.article.commentCount}</span>

  	</div>
  </div>
  
<div class="comment">
  <div class="commentinput">
    
    <c:if test="${sessionScope.userinfo ne null}" var="n">
      <!--评论start-->
    <form id="submitComment" action="<%=path%>/web/articleComment/toAddComment" method="post">
      <textarea name="comment" cols="" rows="" placeholder="写下您的评论..." class="inputComment"></textarea>
      <input type="button" class="seach_bun" name="button" id="button" onclick="toSubmitComment()" value="提交评论">
    </form>
      <!--评论end-->
    </c:if>
    <c:if test="${not n}">
      <a href="<%=path%>/web/userinfo/login"><h2>点此登录后可以进行评论</h2></a>
    </c:if>


    <ul class="getFatherComments"></ul>


    </div>
</div>


  <script src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
  <script src="<%=path%>/static/js/layui/layui.all.js"></script>
  <script>

    //$.get("/web/article/judgePraise"

    //)
    $(function () {
      //页面加载完成ajax
      $.get("<%=path%>/web/article/fatherCommentData",
              {id:${param.id}},
              function(data){
                $(".getFatherComments").html(data);
              });


    })

    var parentCommentId=null;

    //ajax查找所有父类评论
    function toAjax() {
      $.ajax({
        url:"<%=path%>/web/article/fatherCommentData",
        async:false,
        data:{pageNum:pageNum,id:${param.id}},
        type:"GET",
        success:function (data) {
          $(".getFatherComments").empty();
          $(".getFatherComments").html(data);
          $("#page"+pageNum).css("color","red");
        }
      })
    }

    //给回复TA按钮添加点击事件
    function toWriteComment(obj){
      var pn= $(obj).data("pn");//获取被回复用户的昵称
      parentCommentId=$(obj).data("pi");//获取被回复用户的id:parentCommentId
      $(".inputComment").attr("placeholder","回复@"+pn);//更改文本域里面的默认
    }

    //给提交按钮添加点击事件:提交输入的评论
    function toSubmitComment(obj){
      var articleId = ${param.id};//获取文章id：articleId
      var content = $(".inputComment").val();//获取评论内容content
      if(content.length<5){
        layer.msg("不能少于5个字符",{icon:5});
        return;
      }
      else{
        $.ajax({
          url:"<%=path%>/web/articleComment/toAddComment",
          async:false,
          data:{parentCommentId:parentCommentId,articleId:articleId,content:content},
          type:"GET",
          success:function () {
            layer.msg("评论成功",{icon:6});
            parentCommentId=null;
            $(".inputComment").attr("placeholder","写下你的评论...");
            $(".inputComment").val("");

          }
        })
      }
    }


    //点赞
    $("#praise").click(function () {
      //没登录就跳转登录页面
      if(${sessionScope.userinfo eq null}) {
        window.location.href = "<%=path%>/web/userinfo/login";
        return;
      }
      var id = ${requestScope.article.id};//文章id
      $.get("<%=path%>/web/article/praise",
              {id:id},
              function (data) {
                if(data==false){
                  $("#praise").attr("class","active");
                  $("#praiseCount").html(parseInt($("#praiseCount").html())+1);
                }else {
                      layer.msg("不能重复点赞",{icon:2})
                }
              }
      )
    })

    //收藏
    $("#collect").click(function () {
      //没登录就跳转登录页面
      if(${sessionScope.userinfo eq null}){
        window.location.href="<%=path%>/web/userinfo/login";
        return;
      }
        var id = ${requestScope.article.id};//文章id
        var articleName = "${requestScope.article.title}";//文章标题
        var authorName = "${requestScope.article.userinfo.nickname}";//作者名

           $.get("<%=path%>/web/article/collect",
                   {id:id,articleName:articleName,authorName:authorName},
                   function (data) {
                        if(data==true){
                            $("#collect").html("点击收藏");
                            layer.msg("取消收藏",{icon:2})
                        }
                        if(data==false){
                            $("#collect").html("已收藏");
                            layer.msg("收藏成功",{icon:1})
                        }

                   }
           )
    })

  </script>


</article>
</section>
</div>


<jsp:include page="/web/inc/footer"/>
